<template>
  <div>
    <el-card>
      <!-- 数据列表-->
      <el-table
        :data="
          tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
        "
        border
        class="table"
        ref="multipleTable"
        highlight-current-row
         height="600"
      >
        <el-table-column
          prop="questionNumber"
          label="题号"
          min-width="60"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="试题类型"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="题目"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionA"
          label="选项A"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionB"
          label="B"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionC"
          label="C"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionD"
          label="D"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionE"
          label="E"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionF"
          label="F"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="rightAnswer"
          label="正确答案"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="分值"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="level"
          label="难易程度"
          min-width="40"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import webservice from "../../../api/webservice";
export default {
  data() {
    return {
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 40, 50],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
    };
  },
  created() {},
  mounted() {
    this.getData();
    console.log(this.$route.params.id);
  },
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      console.log(this.pageSizes);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    getData() {
      let _param = {
        paperId: this.$route.params.id,
      };
      let _params = JSON.stringify(_param);
      webservice.HttpPost("/api/questionStore/selectQuestionList", _params, (data) => {
        if (data.code === 200) {
          this.tableData = data.data;
          console.log(this.tableData)
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style>
</style>